import axios from 'axios'
import React, { useEffect, useState } from 'react'
import _ from 'lodash'
import { PageHeader, Card, Col, Row, List } from 'antd';
export default function News() {
    const [dataSource, setdataSource] = useState([])
    useEffect(() => {
        axios.get('/news?publishState=2&_expand=category').then(res => {
            setdataSource(Object.entries(_.groupBy(res.data, (item) => item.category.title)))
        })
    }, [])
    return (
        <div style={{ width: '95%', margin: '0 auto' }}>
            <PageHeader
                className="site-page-header"
                title="全球大新闻"
                subTitle="查看新闻"
            />

            <div >
                <Row gutter={16}>
                    {
                        dataSource.map((item) => {
                            return <Col span={8} key={item[0]}>
                                <Card title={item[0]} bordered={false} hoverable>
                                    <List
                                        size='small'
                                        dataSource={item[1]}
                                        pagination={
                                            {
                                                pageSize: 3
                                            }
                                        }
                                        renderItem={(data) => <List.Item>
                                            <a href={`#/detail/${data.id}`}>{data.title}</a>
                                        </List.Item>}
                                    >
                                    </List>
                                </Card>
                            </Col>
                        })
                    }
                </Row>
            </div>
        </div >
    )
}
